<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
            width: 100vw;
            height: 100vh;
            background-image: url('./images/bg3.gif');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            perspective: 800px;
            width: 400px;
            height: 400px;
            position: relative;
            margin: 0 auto;
            animation: scale 3s ease;
        }

        .cube{
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }

        .face {
            position: absolute;
            width: 400px;
            height: 400px;
            overflow: hidden;
            border: 2px solid #000;
            background-color: rgba(255,255,255, 0.8);
        }

        .face img {
            height: 100%;
            margin-left: -20%;
        }

        .front {
            transform: translateZ(200px);
        }

        .back {
            transform: rotateY(180deg) translateZ(200px);
        }

        .left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }

        @keyframes scale {
            0% {transform: scale(0.5);}
            100% {transform: scale(1);}
        }

        @keyframes rotate {
            0% {transform: rotateX(0deg) rotateY(0deg);}
            100% {transform: rotateX(360deg) rotateY(360deg);}
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cube">
            <div class="face front">
                <img src="./images/1.jpeg" alt="" srcset="">
            </div>
            <div class="face back">
                <img src="./images/2.jpeg" alt="" srcset="">
            </div>
            <div class="face left">
                <img src="./images/3.jpeg" alt="" srcset="">
            </div>
            <div class="face right">
                <img src="./images/4.jpeg" alt="" srcset="">
            </div>
            <div class="face top">
                <img src="./images/5.jpeg" alt="" srcset="">
            </div>
            <div class="face bottom">
                <img src="./images/6.jpeg" alt="" srcset="">
            </div>
        </div>
    </div>
</body>
</html>